<template>
  <!-- 统计面板 -->
  <a-spin :spinning="loading">
  <a-collapse :bordered="false" v-model="activeKey" expand-icon-position="right"  :class="['mb12', notExpand && 'notExpand']">
    <a-collapse-panel style="background: #e6f3fc; border: none" :showArrow="false" :disabled="notExpand">
      <!-- 汇总面板 -->
      <template slot="header">
        <a-row type="flex" justify="space-between" align="middle" style="width: 100%">
          <div>
            <a-icon style="color: #108ee9" class="mr20" type="exclamation-circle" />
            <slot name="left" :data="countInfo" />
          </div>
          <div v-if="!notExpand">
            <slot name="right" />
            <a class="btn_right">
              <span>{{ activeKey.length > 0 ? '收起' : '展开' }}详细汇总信息</span>
              <a-icon :type="activeKey.length > 0 ? 'up' : 'down'" />
            </a>
          </div>
        </a-row>
      </template>
      <div>
        <!-- 汇总标题 -->
        <a-tabs v-if="tabList.length > 0" :activeKey="args.type" @change="switchSummary">
          <a-tab-pane
            v-for="(item, index) in tabList"
            :key="item[replaceFields.key] || index"
            :tab="item[replaceFields.name] || ''"
          ></a-tab-pane>
        </a-tabs>
        <!-- 汇总表格 -->
        <s-table
          ref="tableSummary"
          tableLayout="fixed"
          size="default"
          :rowKey="(record) => record[replaceFields.tableKey || 'id']"
          :scroll="{ y: 500 }"
          :columns="columnsSummary"
          :data="loadDataSummary"
          :showPagination="false"
          style="background: #fff"
        >
          <slot name="table" />
        </s-table>
      </div>
    </a-collapse-panel>
  </a-collapse>
</a-spin>
</template>

<script>
import { Collapse } from 'ant-design-vue' // ant
import { STable } from '@/components' // 表格

export default {
  name: 'CollapseStatic',
  components: {
    STable,
    ACollapse: Collapse,
    ACollapsePanel: Collapse['Panel']
  },
  props: {
    // 表头
    columnsSummary: {
      type: [Array],
      default: () => []
    },
    // 汇总标题
    tabList: {
      type: Array,
      default: () => []
    },
    // 列表api
    loadDataSummaryApi: {
      type: Object,
      default: () => ({})
    },
    // 替换参数集
    replaceFields: {
      type: Object,
      default: () => ({
        key: 'key',
        name: 'name',
        tableKey: 'id'
      })
    },
    // 汇总参数
    form: {
      type: Object,
      default: () => ({})
    },
    // 汇总回调参数字段名
    countObjString: {
      type: String,
      default: () => 'countTable'
    },
    // 加载表格计数器
    loadCount: {
      type: [Number, String],
      default: () => 0
    },
    // 闭合时不传args的参数
    closeWithNoArgs: {
      type: Boolean,
      default: false
    },
    //是否禁用不展开
    notExpand:{
      type: Boolean,
      default: false
    },
  },
  watch: {
    // 加载表格计数器
    loadCount() {
      this.$nextTick(() => {
        if (this.$refs.tableSummary) {
          this.$refs.tableSummary.refresh(true)
        } else {
          // 获取汇总信息
          this.getStatic().then((res) => {
            this.countInfo = res.data
          })
        }
      })
    }
  },
  data() {
    return {
      activeKey: [], // tabs控件
      loading:false,
      args: {
        type: '0'
        // ids: [], // 表格选中集合
      },
      countInfo: {}, // 汇总对象
      loadDataSummary: () => {
        let that = this
        that.loading =  true;
        return that.getStatic().then((res) => {
          // 深拷贝回调对象
          let datas = that.$clone(res)
          that.loading =  false;
          datas.data = res.data[that.countObjString] || [] // 列表对象
          that.countInfo = res.data
          return datas
        })
      } // 汇总异步数据
    }
  },
  mounted() {
    if (this.tabList?.length > 0) {
      this.args.type = this.tabList[0].key
    }
    // 获取汇总信息
    this.loading =  true;
    this.getStatic().then((res) => {
      this.loading =  false;
      this.countInfo = res.data
    })
  },
  methods: {
    /**
     * 获取汇总
     */
    getStatic() {
      let that = this
      const requestParameters = Object.assign(
        {},
        this.closeWithNoArgs && !this.activeKey.length ? {} : that.args,
        that.form
      )
      return that.loadDataSummaryApi?.count(requestParameters)
    },
    /**
     * 汇总：type:0 全部;1 选中
     */
    getSummary(type) {
      let that = this
      if (type == 0) {
        //
        that.args.ids = []
      } else {
        that.args.ids = that.rowSelection.selectedRowKeys
      }
      if (that.activeKey.length == 0) {
        that.activeKey = ['0']
      }
      that.$nextTick(() => {
        that.$refs.tableSummary.refresh(true)
      })
    },
    /**
     * 切换汇总标题
     */
    switchSummary(e) {
      this.args.type = e
      // 绑定父组件
      if (this.$listeners['update:switchSummary']) {
        this.$emit('update:switchSummary', e)
      }
      // 父组件回调
      if (this.$listeners['switchSummary']) {
        this.$emit('switchSummary', e)
      }
      this.$nextTick(() => {
        this.$refs.tableSummary.refresh(true)
      })
    }
  }
}
</script>
<style scoped lang="less">
@deep: ~'>>>';
.notExpand{
   @{deep} .ant-collapse-header{
    color: #000;
    cursor:pointer
  }
}
</style>

